<template>
  <el-dialog
    :title="title"
    :visible.sync="show"
    width="800px"
    center
    append-to-body
  >
    <div class="search-box">
      <el-form label-width="100px" :inline="true">
        <el-form-item label="供应商名称">
          <el-input v-model="name" />
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
        <el-button type="warning" icon="el-icon-refresh" @click="reset()">重置</el-button>
      </el-form>
    </div>
    <com-table
      :multiple-table="true"
      :data="dataList"
      :columns="columns"
      :total="total"
      @pageChange="pageChange"
      @getSelectedRows="getSelectedRows"
    >
      <!-- <template v-slot:quotationPrice="{row}">
        <el-input v-model="row.quotationPrice" />
      </template>
      <template v-slot:rank="{row}">
        <el-input v-model="row.rank" />
      </template>
      <template v-slot:remark="{row}">
        <el-input v-model="row.remark" />
      </template>
      <template v-slot:supplierInfoName="{row}">
        {{ row.name }}
      </template>
      <template v-slot:win="{row}">
        <el-select v-model="row.win" placeholder="是否中标">
          <el-option label="是" :value="true" />
          <el-option label="否" :value="false" />
        </el-select>
      </template> -->
    </com-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="show = false">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { turnMap } from './config.js'
export default {
  name: 'SupplierList',
  components: {

  },
  props: {
    title: {
      type: String,
      default: ''
    },
    showModal: {
      type: Boolean,
      default: false
    },
    // columns: {
    //   type: Array,
    //   default() {
    //     return []
    //   }
    // },
    apiObj: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      visible: false,
      dataList: [],
      name: '',
      total: 0,
      pageParams: {
        pageNum: 1,
        pageSize: 10
      },
      selectedRows: [],
      columns: [
        {
          label: '编号',
          prop: 'number'
        },
        {
          label: '供应商名称',
          prop: 'name'
        },
        {
          label: '省份',
          prop: 'province'
        },
        {
          label: '城市',
          prop: 'city'
        }
      ]
    }
  },
  computed: {
    show: {
      get() {
        return this.showModal
      },
      set(val) {
        this.$emit('update:showModal', val)
      }
    }
  },
  watch: {
    showModal: {
      handler(newData) {
        if (newData) {
          this.columns.map(item => {
            item.prop = turnMap[item.prop] ? turnMap[item.prop] : item.prop
          })

          this.getList()
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {

  },
  methods: {
    confirm() {
      this.show = false
      if (this.selectedRows.length > 0) {
        this.$emit('getSelectedRows', this.selectedRows)
      }
    },
    getSelectedRows(data) {
      this.selectedRows = data
    },
    pageChange(data) {
      this.pageParams = data
      this.getList()
    },
    search() {
      this.getList()
    },
    reset() {
      this.name = ''
      this.getList()
    },
    getList() {
      const params = {
        ...this.pageParams,
        name: this.name
      }
      this.apiObj.api(params).then(res => {
        const { data, total } = res.data || {}
        if (data) {
          this.dataList = data
          this.total = total - 0
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.com-form-title{
  font-size: 14px;
  font-weight: bold;
  line-height: 35px;
  color: #409EFF;
  border-bottom: 1px solid #dedede;
  margin-bottom: 6px;
}
</style>
